<template>
	<view class="usercode-container" style="background-color: #FFBB1A;height: 100%;">
		<u-navbar :border-bottom="false" title="个人二维码" :background="{'background':'#FFBB1A'}" :title-size="36" :title-bold="true" :title-color="textColor"></u-navbar>
		<view class="u-p-38" >
			<view class="code-content">
				<view class="logo-box">
					<image :src="storeUser.headImg" style="width: 100%;height: 100%; border-radius: 50%;" ></image>
				</view>
				<view class="u-m-t-75 u-m-b-48 u-font-32 u-text-center" >{{storeUser.realname}}</view>
				<view class="erweima-box u-p-20">
					<image :src="erweima" style="width: 100%;" mode="widthFix"></image>
				</view>
				<view class="u-m-t-70 u-p-t-28 u-font-28 u-text-center" style="border-top: 1px solid #E5E0D4;color: #666;">
					企业管理员扫此二维码可加您进入企业
				</view>
			</view>
		</view>
		<akLoading isFullScreen :active="loading"></akLoading>
	</view>
</template>

<script>
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default{
		data(){
			return {
				loading:false,
				erweima:'',
			}
		},
		created(){
			this.getQrcode();
		},
		computed:{
			...mapState(useUserStore, {storeUser: 'user'})
		},
		methods:{
			// 获取二维码
			async getQrcode() {
				this.loading = true;
				const res = await this.$http.get('api/User/QRCodeGenerate/QRCode.png', { responseType: 'arraybuffer'});
				this.loading = false;
				this.erweima = 'data:image/jpeg;base64,'+ uni.arrayBufferToBase64(res)
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFBB1A;
	}
	.usercode-container{
		
		.code-content{
			background-color: #FFF9EC;
			box-sizing: border-box;
			padding: 38rpx 68rpx;
			border-radius: 30rpx;
			margin-top: 120rpx;
			position: relative;
			.logo-box{
				position: absolute;
				width: 148rpx;
				height: 148rpx;
				box-sizing: border-box;
				border: 6rpx solid #fff;
				border-radius:50%;
				margin: 0 auto;
				// transform: translateY(-100rpx);
				top: -74rpx;
				left: 50%;
				margin-left: -74rpx;
			 }
			.erweima-box{
				background-color: #fff;
				box-sizing: border-box;
				border-radius: 30rpx;
			}
		}
	}
</style>